<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册 - 百货购物平台</title>
    <link rel="stylesheet" href="layui-v2.9.20/layui/css/layui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
        }

        body {
            background-color: #fafafa;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #fff0f3 0%, #ffecef 100%);
        }

        .register-container {
            width: 500px;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 15px 40px rgba(255, 141, 161, 0.25);
            padding: 50px 40px;
            position: relative;
            overflow: hidden;
        }

        .register-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .register-header h2 {
            color: #ff4d7a;
            font-size: 32px;
            font-weight: 800;
        }

        .register-header p {
            color: #888;
            margin-top: 15px;
            font-size: 16px;
        }

        .register-form .layui-form-item {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 10px;
            color: #666;
            font-weight: 500;
            font-size: 16px;
        }

        .register-form .layui-input {
            height: 55px;
            line-height: 55px;
            padding-left: 55px;
            border-radius: 10px;
            border: 1px solid #eee;
            font-size: 16px;
            width: 100%;
        }

        .register-form .layui-input:focus {
            border-color: #ff8da1;
            box-shadow: 0 0 0 2px rgba(255, 141, 161, 0.2);
        }

        .register-form .input-icon {
            position: absolute;
            left: 20px;
            top: 18px;
            color: #999;
            font-size: 22px;
        }

        .register-btn {
            background: linear-gradient(135deg, #ff4d7a 0%, #ff8da1 100%);
            color: white;
            border: none;
            height: 55px;
            line-height: 55px;
            font-size: 20px;
            font-weight: 600;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            box-shadow: 0 5px 15px rgba(255, 77, 122, 0.3);
        }

        .register-btn:hover {
            background: linear-gradient(135deg, #ff3366 0%, #ff7799 100%);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 77, 122, 0.4);
        }

        .register-footer {
            text-align: center;
            margin-top: 30px;
            color: #888;
            font-size: 16px;
        }

        .register-footer a {
            color: #ff4d7a;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }

        .register-footer a:hover {
            text-decoration: underline;
            color: #ff3366;
        }

        .logo {
            text-align: center;
            margin-bottom: 25px;
            color: #ff4d7a;
            font-size: 40px;
            font-weight: 800;
        }

        .logo i {
            margin-right: 12px;
            font-size: 42px;
        }

        .input-container {
            position: relative;
        }

        .password-toggle {
            position: absolute;
            right: 20px;
            top: 18px;
            color: #999;
            font-size: 22px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="register-container">
    <div class="logo">
        <i class="fas fa-shopping-bag"></i>
        <span>百货购物</span>
    </div>
    <div class="register-header">
        <h2>用户注册</h2>
        <p>加入我们，开启购物之旅</p>
    </div>
    <form class="layui-form register-form" action="">
        <div class="layui-form-item">
            <label class="form-label">用户名</label>
            <div class="input-container">
                <i class="fas fa-user input-icon"></i>
                <input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="form-label">手机号</label>
            <div class="input-container">
                <i class="fas fa-mobile-alt input-icon"></i>
                <input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="form-label">密码</label>
            <div class="input-container">
                <i class="fas fa-lock input-icon"></i>
                <input type="password" name="password" id="password" required lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                <i class="fas fa-eye password-toggle" id="togglePassword"></i>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="form-label">确认密码</label>
            <div class="input-container">
                <i class="fas fa-lock input-icon"></i>
                <input type="password" name="repassword" required lay-verify="required|repass" placeholder="请确认密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="form-label">邮箱</label>
            <div class="input-container">
                <i class="fas fa-envelope input-icon"></i>
                <input type="text" name="email" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <button class="register-btn" lay-submit lay-filter="register">注 册</button>
        </div>
        <div class="register-footer">
            已有账号？<a href="longin.html">立即登录</a>
        </div>
    </form>
</div>

<script src="layui-v2.9.20/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function() {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        // 密码显示/隐藏切换
        $('#togglePassword').on('click', function() {
            const passwordInput = $('#password');
            const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
            passwordInput.attr('type', type);
            $(this).toggleClass('fa-eye fa-eye-slash');
        });

        // 自定义验证规则
        form.verify({
            // pass: [
            //     /^[\S]{6,20}$/,
            //     '密码长度6到20位，不能包含空格'
            // ],
            repass: function(value) {
                var password = $('#password').val();
                if (value !== password) {
                    return '两次输入的密码不一致！';
                }
            },
            email: function(value) {
                var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                if (!reg.test(value)) {
                    return '邮箱格式不正确！';
                }
            },
            phone: function(value) {
                var reg = /^1[3-9]\d{9}$/;
                if (!reg.test(value)) {
                    return '手机号码格式不正确！';
                }
            }
        });

        // 获取后端基础URL
        function getBackendBaseUrl() {
            return window.location.origin + '/springboot_shopping';
        }

        // 表单提交事件 - 使用fetch API发送请求
        form.on('submit(register)', async function(data) {
            // 获取表单数据
            var formData = data.field;

            // 禁用按钮防止重复提交
            var btn = $('.register-btn');
            btn.prop('disabled', true).css('opacity', '0.7');

            // 显示加载提示
            var loadingIndex = layer.load(0, {
                shade: [0.1, '#fff']
            });

            // 获取后端基础URL - 解决跨域问题
            function getBackendBaseUrl() {
                // 根据当前环境确定后端URL
                if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
                    return 'http://localhost:8080';
                }
                // 生产环境使用相同域名
                return window.location.origin;
            }


            try {
                // 发送注册请求 - 使用fetch API
                const response = await fetch(`${getBackendBaseUrl()}/user/register`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        userName: formData.userName,
                        password: formData.password,
                        email: formData.email,
                        phone: formData.phone
                    })
                });

                // 解析响应数据
                const res = await response.json();

                layer.close(loadingIndex);
                if (res.code === 200) {
                    layer.msg('注册成功！', {icon: 1, time: 1500}, function() {
                        window.location.href = window.location.origin + '/springboot_shopping/main/webapp/index.html';
                    });
                } else {
                    layer.msg(res.message || '注册失败，请稍后重试', {icon: 2, time: 2000});
                    // 启用按钮
                    btn.prop('disabled', false).css('opacity', '1');
                }
            } catch (error) {
                layer.close(loadingIndex);
                layer.msg('请求失败，请检查网络连接', {icon: 2, time: 2000});
                // 启用按钮
                btn.prop('disabled', false).css('opacity', '1');
            }

            return false; // 阻止表单跳转
        });
    });
</script>
</body>
</html>